<!--饼图  -->
<template>
  <div class="pie-chart" ref="pie"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  components: {},
  name: 'PieChart',
  props: {
    chartData: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.pie);
      this.setOptions(this.chartData, this.title);
    },
    /**
     * setOptions需要接参数的
     */
    setOptions(val, titles) {
      var _that = this;

      if (val[0].value == 0 && val[1].value == 0) {
        this.chart.setOption({
          title: [
            {
              left: '0',
              top: '0',
              text: titles,
              textStyle: {
                color: '#323233',
                lineHeight: 20,
                fontSize: 14,
                fontWeight: '500',
                fontFamily: 'PingFangSC-Medium, PingFang SC',
              },
            },
            {
              show: true,
              text: '暂无数据',
              left: 'center',
              top: 'center',
            },
          ],
        });
      } else {
        let num = val.reduce((prev, next) => {
          return prev.value + next.value;
        });
        this.chart.setOption({
          color: ['#0A73E4', '#13C2C2'],
          title: [
            {
              left: '0',
              top: '0',
              text: titles,
              textStyle: {
                color: '#323233',
                lineHeight: 20,
                fontSize: 16,
                fontWeight: '500',
                fontFamily: 'PingFangSC-Medium, PingFang SC',
              },
            },
            {
              text: '{val|' + num + '}',
              top: '48%',
              left: 'center',
              textStyle: {
                rich: {
                  name: {
                    fontSize: 30,
                    fontWeight: 'normal',
                    color: '#666666',
                    padding: [10, -5],
                  },
                  val: {
                    fontSize: 30,
                    fontWeight: 500,
                    color: '#333333',
                    fontFamily: 'PingFangSC-Medium, PingFang SC',
                    padding: [0, -8],
                  },
                },
              },
            },
            {
              text: '单位：人',
              top: '15%',
              left: 'right',
              textStyle: {
                color: '#999999',
                lineHeight: 20,
                fontSize: 14,
                fontWeight: '400',
              },
            },
          ],
          legend: {
            bottom: '1%',
            itemWidth: 24,
            itemHeight: 14,
            orient: 'vertical',
            selectedMode: false,
            itemGap: 0,
            textStyle: {
              color: '#323233',
              fontWeight: 400,
              fontSize: 14,
              lineHeight: 20,
              height: 20,
              fontFamily: 'PingFangSC-Regular, PingFang SC',
            },
            formatter: function (name) {
              let target;
              for (let i = 0; i < val.length; i++) {
                if (val[i].name === name) {
                  target = val[i].value;
                }
              }
              const arr = [`${name}`, `${target}`];
              return arr.join('  ');
            },
          },
          series: [
            {
              top: '20%',
              type: 'pie',
              radius: [70, 100],
              width: '100%',
              label: {
                width: 200,
                color: '#333333',
                formatter: '{d}%',
                fontFamily: 'PingFangSC-Regular PingFang SC',
                fontWeight: 400,
                lineHeight: 17,
              },
              center: ['50%', '40%'],
              labelLine: {
                show: true,
                length: 20,
                length2: 0,
              },
              emphasis: {
                disabled: true,
              },

              data: val,
            },
          ],
        });
      }

      window.addEventListener('resize', () => {
        _that.chart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pie-chart {
  width: 100%;
  height: 100%;
}
</style>
